import React, { useEffect, useState } from "react";
import { Button, Table, Modal, message } from "antd";
import styles from "./index.less";
import { getList } from "../../../services/acceptGroup";

const ReceivesSelect = props => {
  const {
    receivesOfSelected: listOfSelectedReceives,
    onCheck: setlistOfSelectedReceives,
    onClose,
    visible
  } = props;
  const [listOfReceives, setlistOfReceives] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pageNum, setpageNum] = useState(1);
  const [pageSize, setpageSize] = useState(5);
  const [total, settotal] = useState(0);

  useEffect(() => {
    onSearch();
  }, [pageNum, pageSize]);

  // 查询接收组
  function onSearch() {
    const params = {
      pageNum,
      pageSize,
      isEnabled: "Y"
    };
    setLoading(true);
    getList(params).then(res => {
      if (res.success) {
        setlistOfReceives(res.datas.list || []);
        settotal(res.total);
      } else {
        message.error(res.errMsg);
      }
      setLoading(false);
    });
  }
  // 表格页码变化
  const onPageChange = (cur, size) => {
    setpageNum(cur);
    setpageSize(size);
  };
  // 子组织表格column
  const receiveColumn = [
    {
      title: "接收组编码",
      dataIndex: "receiveGroupCode"
    },
    {
      title: "接收组名称",
      dataIndex: "receiveGroupName"
    },
    {
      title: "接收组范围",
      dataIndex: "baseReceiveGroupRangeDTOList",
      ellipsis: true,
      render: ranges => {
        try {
          const arr = ranges || [];
          return arr
            .map(r =>
              JSON.parse(r.rangeEntityId)
                .map(obj => Object.values(obj)[0])
                .join(",")
            )
            .join(",");
        } catch (e) {
          const arr = ranges || [];
          return arr.map(r => r.rangeEntityId).join(",");
        }
      }
    }
  ];
  // 表格check配置
  const rowSelection = {
    selectedRowKeys: listOfSelectedReceives.map(o => o.receiveGroupCode),
    onSelect: (record, selected) => {
      if (selected) {
        setlistOfSelectedReceives([record]);
      } else {
        setlistOfSelectedReceives(
          []
          // listOfSelectedReceives.filter(o => +o.receiveGroupCode !== record.receiveGroupCode)
        );
      }
    },
    hideDefaultSelections: true // 去掉全选
    // onSelectAll: selected => {
    //   if (selected) {
    //     // 记录当前表格新增的record
    //     const newRec = [];
    //     listOfReceives.forEach(l => {
    //       if (!listOfSelectedReceives.find(ls => ls.receiveGroupCode === l.receiveGroupCode)) {
    //         newRec.push(l);
    //       }
    //     });
    //     setlistOfSelectedReceives(listOfSelectedReceives.concat(newRec));
    //   } else {
    //     // 删除已选择数据中心包含当前表格数据的记录
    //     setlistOfSelectedReceives(
    //       listOfSelectedReceives.filter(
    //         o => !listOfReceives.some(l => l.receiveGroupCode === o.receiveGroupCode)
    //       )
    //     );
    //   }
    // }
  };

  return (
    <Modal
      title="选择接收组"
      visible={visible}
      onCancel={onClose}
      wrapClassName={styles.modalCls}
      footer={[
        <Button key="ok" type="primary" onClick={onClose}>
          确认
        </Button>
      ]}
    >
      <div className={styles.root}>
        <div className={styles.menuTable}>
          <Table
            rowKey="receiveGroupCode"
            columns={receiveColumn}
            dataSource={listOfReceives}
            rowSelection={rowSelection}
            pagination={{
              pageSize,
              current: pageNum,
              total,
              onChange: onPageChange
            }}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};

export default ReceivesSelect;
